<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" width="70%" destroy-on-close @closed="$emit('closed')" align-center>
        <el-button type="primary" @click="print">打印</el-button>
        <el-main>
            <div class="printMain" ref="printMain">
                <div class="title">
                    <span>{{titleMap[mode]}}拣货单</span>
                </div>
                <div class="time">打印时间 : {{time}}</div>
                <div class="attention">
                    注意：<span>若订单号右侧显示成分版本号标识时(例如：V2),则代表该SKC变更过成分，请在拣货时将该版本号与实物洗水标上版本号核对，确保一数后再发货。</span>
                </div>
                <table style="border-collapse: collapse;margin-top:20px">
                    <thead>
                        <tr style="display:block;margin:15px;"></tr>
                        <tr>
                            <th class="thCss" style="width:5%;">序号</th>
                            <th class="thCss">订单信息</th>
                            <th class="thCss">订单标签</th>
                            <th class="thCss" style="width:15%;">图片</th>
                            <th class="thCss">商品</th>
                            <th class="thCss">下单数量</th>
                            <th class="thCss" style="width:5%;">拣货数量</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in detail" :key="index">
                            <td class="thCss" style="width:5%;">{{index + 1}}</td>
                            <td class="thCss">
                                <div class='w-40 left orderInfo'>
                                    <div style="margin-left:5px" v-if="mode=='wait'">子订单号 : B5548571365</div>
                                    <div style="margin-left:5px">下单时间 : {{item.create_time}}</div>
                                    <div style="margin-left:5px">要求发货时间 : {{item.deliver_time}}</div>
                                    <div style="margin-left:5px">JIT母单 : {{item.order_no}}</div>
                                </div>
                            </td>
                            <td class="thCss">
                                <div class='w-40 left number' style="flex-direction: column;">
                                <div>客户 : {{item.custom_name}}</div>
                                <div>品牌 : {{item.brand_name}}</div>
                                <div style="color: #f00;" v-if="item.type==0">首单</div>
                                <div v-else>加单</div>
                            </div>
                            </td>
                            <td class="thCss">
                                <img :src="item.goods.goods_image" alt="" style="width: 90%;margin: 0 5%;" />
                            </td>
                            <td class="thCss">
                                <div class='w-40 left goods' style="flex-direction: column;text-align: left;padding: 0 5px">
                                    <!-- <div style="display:flex;align-items:center;">
                                        <img :src="item.goods.goods_image" alt="" style="width: 35%;margin: 0 5px;" />
                                        <div style="display: flex;flex-direction: column;justify-content: center;text-align: left;width: 60%">
                                            <div style="display:flex;align-items:start"> <div>SKC: </div> <div style="width: 70%;word-wrap: break-word;">{{item.skc}}</div></div>
                                            <div>供方货号 : {{item.factory_number}}</div>
                                        </div>
                                    </div> -->
                                    <div style="word-wrap: break-word;"> <span>SKC:</span> {{item.skc}}</div>
                                    <div>供方货号 : {{item.factory_number}}</div>
                                    <div style="color: #f00;word-wrap: break-word;"> <span style="color: #000;">成分: </span> {{item.component_detail}}</div>
                                </div>
                            </td>
                            <td class="thCss" style="padding:0;height:100px;">
                                <div class='w-40 left number' style="flex-direction: column;height: 100%;">
                                    <div class="numDetail" v-for="(item1,index1) in item.orderDetail" :key="index1">
                                        <div class="numName" style="border-right: 1px solid #000000;">{{item1.goods_size}}</div>
                                        <div class="kong"></div>
                                        <div class="numName">{{item1.num}}</div>
                                    </div>
                                    <div class="numDetail" style="border:none">
                                        <div class="numName">合计</div>
                                        <div class="kong"></div>
                                        <div class="numName" style="background: #ff0;height: 100%;display: flex;align-items: center;justify-content: center;">{{item.total_count}}</div>
                                    </div>
                                </div>
                            </td>
                            <td class="thCss" style="width:5%;">
                                <div class='w-40 left number' ><span></span></div>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div></div>
                <!-- <div class='products'>
                    <div class='custom-table'>
                        <div class='custom-th' style='display:flex;line-height: 28px;border-bottom: 1px solid #000000;'>
                            <div class='w-40 left jianHeader' style="width:5%;"><span>序号</span></div>
                            <div class='w-40 left jianHeader' style="width:20%;"><span>订单信息</span></div>
                            <div class='w-40 left' style="text-align:center;border-right: 1px solid #000000;width: 15%;"><span>订单标签</span></div>
                            <div class='w-40 left' style="text-align:center;border-right: 1px solid #000000;width: 38%;"><span>商品</span></div>
                            <div class='w-40 left' style="text-align:center;border-right: 1px solid #000000;width: 15%;"><span>下单数量</span></div>
                            <div class='w-40 left' style="text-align:center;width: 7%;"><span>拣货数量</span></div>
                        </div>
                        <div class='custom-th' style='display:flex;line-height: 28px;' v-for="(item,index) in detail" :key="index">
                            <div class='w-40 left jianHeader' style="width:5%;border-bottom: 1px solid #000000;"><span>{{index + 1}}</span></div>
                            <div class='w-40 left orderInfo' style="width:20%;">
                                <div style="margin-left:5px" v-if="mode=='wait'">子订单号 : B5548571365</div>
                                <div style="margin-left:5px">下单时间 : {{item.create_time}}</div>
                                <div style="margin-left:5px">要求发货时间 : {{item.deliver_time}}</div>
                                <div style="margin-left:5px">JIT母单 : {{item.order_no}}</div>
                            </div>
                            <div class='w-40 left number' style="width:15%;flex-direction: column;border-bottom: 1px solid #000000;">
                                <div>客户 : {{item.custom_name}}</div>
                                <div>品牌 : {{item.brand_name}}</div>
                                <div style="color: #f00;" v-if="item.type==0">首单</div>
                                <div v-else>加单</div>
                            </div>
                            <div class='w-40 left goods' style="width: 38%;">
                                <img :src="item.goods.goods_image" alt="" style="width: 45%;margin: 0 5px;" />
                                <div style="display: flex;flex-direction: column;justify-content: center;text-align: left;width: 50%">
                                    <div>SKC : {{item.skc}}</div>
                                    <div>供方货号 : {{item.factory_number}}</div>
                                    <div style="display:flex;align-items:start"> <div>成分 : </div> <div style="color: #f00;width: 70%;word-wrap: break-word;">{{item.component_detail}}</div></div>
                                </div>
                            </div>
                            <div class='w-40 left number' style="border-right: 1px solid #000000;flex-direction: column;">
                                <div class="numDetail" v-for="(item1,index1) in item.orderDetail" :key="index1">
                                    <div class="numName">{{item1.goods_size}}</div>
                                    <div class="kong"></div>
                                    <div class="numName">{{item1.num}}</div>
                                </div>
                                <div class="numDetail">
                                    <div class="numName">合计</div>
                                    <div class="kong"></div>
                                    <div class="numName" style="background: #ff0;height: 100%;display: flex;align-items: center;justify-content: center;">{{item.total_count}}</div>
                                </div>
                            </div>
                            <div class='w-40 left number' style="border-bottom: 1px solid #000000;align-items: center;width:7%"><span></span></div>
                        </div>
                    </div>
                </div> -->
            </div>
        </el-main>
    </el-dialog>
</template>

<script>
	import print from '@/utils/print'
	export default {
		name: 'print',
		data() {
			return {
                mode: "add",
				titleMap: {
					jit: 'jit母单',
					tong: '待通知发货',
					wait: '待发货'
				},
				visible: false,
				isSaveing: false,
                detail:[],
                time: ""
            }
		},
        mounted () {
            var year=new Date().getFullYear();//年
            if (year< 1900) year = year + 1900;
            var month = new Date().getMonth() + 1;//月
            if (month < 10) month = '0' + month;
            var day = new Date().getDate();//日
            if (day < 10) day = '0' + day;
            var hour = new Date().getHours();//小时
            if (hour < 10) hour = '0' + hour;
            var minute = new Date().getMinutes();//分钟
            if (minute < 10) minute = '0' + minute;
            var second = new Date().getSeconds();//秒
            if (second < 10) second = '0' + second;
            this.time = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
        },
		methods: {
            //显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this
			},
            setData(data){
                this.detail = data
                console.log('data :>> ', data);
			},
			print(){
				//直接传入REF或者querySelector
				print(this.$refs.printMain)
                setTimeout(()=>{
                    this.$emit('success', this.form, this.mode)
                    this.visible = false
                },500)
			},
		}
	}
</script>

<style scoped lang="scss">
div{
    color: #000;
}
.title{
    text-align: center;
    font-weight: 600;
    font-size: 32px;
    color: #000;
    margin-bottom: 10px;
}
.time{
    text-align: end;
    font-size: 22px;
}
.attention{
    border: 1px solid #000000;
    padding: 10px;
    color: #f00;
    margin-top: 20px;
}
.orderInfo{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 12px 0;
}
.goods{
    display: flex;
    align-items: flex-start;
    padding: 12px 0;
}
.number{
    text-align:center;
    display: flex;
    justify-content: space-between;
}
.numDetail{
    border-bottom: 1px solid #000000;
    text-align:center;
    width:100%;
    display: flex;
    align-items: center;
    height: 100%;
}
.kong{
    height: 100%;
}
.numName{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}
.products{
    margin-top: 20px;
    width: 100%;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    .jianHeader{
        text-align:center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #000000;
    }
}
.thCss{
    border:1px solid #000000;
    width: 100vw;
    text-align: center;
    padding: 5px 0;
}
.thCssTwo{
    border:1px solid #000000;
    text-align: center;
    padding: 5px 0;
}
tr {
    page-break-inside: avoid;
}
</style>
